import 'package:flutter/material.dart';
import '../../components/forms/input.dart';
import '../../theme/theme.dart';
import '../../components/buttons/button.dart';

/// 基本表单页面
/// 
/// 对应Miaoyi Web版的form_basic.html，展示各种表单元素和布局
class FormBasicPage extends StatefulWidget {
  /// 构造函数
  const FormBasicPage({Key? key}) : super(key: key);

  @override
  State<FormBasicPage> createState() => _FormBasicPageState();
}

class _FormBasicPageState extends State<FormBasicPage> {
  // 表单数据
  String _username = '';
  String _password = '';
  bool _rememberMe = false;
  bool _inlineRememberMe = false;
  
  // 弹窗表单控制
  bool _showLoginModal = false;
  
  // 下拉选择框数据
  String _selectedOption = '选项 1';
  List<String> _options = ['选项 1', '选项 2', '选项 3', '选项 4'];
  List<String> _multiOptions = [];
  
  // 单选按钮组值
  String _radioValue = 'option1';
  String _customRadioValue = 'option2';
  
  // 复选框值
  bool _checkbox1 = false;
  bool _checkbox2 = true;
  bool _checkbox3 = true;
  bool _checkbox4 = false;
  bool _inlineCheckbox1 = false;
  bool _inlineCheckbox2 = false;
  bool _inlineCheckbox3 = false;
  
  // 自定义复选框值
  bool _customCheckbox1 = false;
  bool _customCheckbox2 = true;
  bool _customCheckbox3 = true;
  bool _customCheckbox4 = false;
  bool _customInlineCheckbox1 = false;
  bool _customInlineCheckbox2 = false;
  bool _customInlineCheckbox3 = false;

  @override
  Widget build(BuildContext context) {
    final theme = HTheme.of(context);
    
    return Scaffold(
      backgroundColor: theme.colors.background,
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 第一行：基本表单和横向表单
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 基本表单
                Expanded(
                  flex: 7,
                  child: _buildBasicLoginForm(theme),
                ),
                const SizedBox(width: 16),
                // 横向表单
                Expanded(
                  flex: 5,
                  child: _buildHorizontalForm(theme),
                ),
              ],
            ),
            const SizedBox(height: 16),
            
            // 第二行：内联表单和弹出表单
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 内联表单
                Expanded(
                  flex: 8,
                  child: _buildInlineForm(theme),
                ),
                const SizedBox(width: 16),
                // 弹出表单
                Expanded(
                  flex: 4,
                  child: _buildPopupForm(theme),
                ),
              ],
            ),
            const SizedBox(height: 16),
            
            // 第三行：所有表单元素
            _buildAllFormElements(theme),
          ],
        ),
      ),
    );
  }
  
  /// 构建基本登录表单
  Widget _buildBasicLoginForm(HTheme theme) {
    return Card(
      elevation: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题栏
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: theme.colors.divider,
                  width: 1,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                RichText(
                  text: TextSpan(
                    text: '基本表单 ',
                    style: theme.textStyles.h4,
                    children: [
                      TextSpan(
                        text: '简单登录表单示例',
                        style: theme.textStyles.secondary.copyWith(
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.arrow_drop_up, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                    const SizedBox(width: 8),
                    PopupMenuButton(
                      icon: const Icon(Icons.settings, size: 16),
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                      itemBuilder: (context) => [
                        const PopupMenuItem(
                          value: 1,
                          child: Text('选项1'),
                        ),
                        const PopupMenuItem(
                          value: 2,
                          child: Text('选项2'),
                        ),
                      ],
                    ),
                    const SizedBox(width: 8),
                    IconButton(
                      icon: const Icon(Icons.close, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                  ],
                ),
              ],
            ),
          ),
          
          // 内容区域
          Padding(
            padding: const EdgeInsets.all(20),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 左侧登录表单
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('登录', style: theme.textStyles.h3),
                      const SizedBox(height: 8),
                      Text('欢迎登录本站(⊙o⊙)', style: theme.textStyles.body),
                      const SizedBox(height: 16),
                      
                      // 用户名输入框
                      HInput(
                        labelText: '用户名',
                        hintText: '请输入您注册的E-mail',
                        keyboardType: TextInputType.emailAddress,
                        onChanged: (value) {
                          setState(() {
                            _username = value;
                          });
                        },
                      ),
                      const SizedBox(height: 16),
                      
                      // 密码输入框
                      HInput(
                        labelText: '密码',
                        hintText: '请输入密码',
                        obscureText: true,
                        onChanged: (value) {
                          setState(() {
                            _password = value;
                          });
                        },
                      ),
                      const SizedBox(height: 16),
                      
                      // 登录按钮和记住我
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              SizedBox(
                                width: 20,
                                height: 20,
                                child: Checkbox(
                                  value: _rememberMe,
                                  onChanged: (value) {
                                    setState(() {
                                      _rememberMe = value ?? false;
                                    });
                                  },
                                ),
                              ),
                              const SizedBox(width: 4),
                              Text('自动登录', style: theme.textStyles.body),
                            ],
                          ),
                          MyButton(
                            text: '登 录',
                            type: MyButtonType.primary,
                            onPressed: () {},
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                
                // 右侧注册提示
                Container(
                  width: 1,
                  height: 200,
                  color: theme.colors.divider,
                  margin: const EdgeInsets.symmetric(horizontal: 20),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const SizedBox(height: 20),
                      Text('还不是会员？', style: theme.textStyles.h4),
                      const SizedBox(height: 8),
                      Text('您可以注册一个新账户', style: theme.textStyles.body),
                      const SizedBox(height: 20),
                      Icon(
                        Icons.login,
                        size: 60,
                        color: theme.colors.primary.withOpacity(0.5),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建横向表单
  Widget _buildHorizontalForm(HTheme theme) {
    return Card(
      elevation: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题栏
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: theme.colors.divider,
                  width: 1,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('横向表单', style: theme.textStyles.h4),
                Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.arrow_drop_up, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                    const SizedBox(width: 8),
                    PopupMenuButton(
                      icon: const Icon(Icons.settings, size: 16),
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                      itemBuilder: (context) => [
                        const PopupMenuItem(
                          value: 1,
                          child: Text('选项1'),
                        ),
                        const PopupMenuItem(
                          value: 2,
                          child: Text('选项2'),
                        ),
                      ],
                    ),
                    const SizedBox(width: 8),
                    IconButton(
                      icon: const Icon(Icons.close, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                  ],
                ),
              ],
            ),
          ),
          
          // 内容区域
          Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('欢迎登录本站(⊙o⊙)', style: theme.textStyles.body),
                const SizedBox(height: 16),
                
                // 用户名
                Row(
                  children: [
                    SizedBox(
                      width: 80,
                      child: Text('用户名：', style: theme.textStyles.body, textAlign: TextAlign.right),
                    ),
                    const SizedBox(width: 8),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          HInput(
                            hintText: '用户名',
                            keyboardType: TextInputType.emailAddress,
                          ),
                          const SizedBox(height: 4),
                          Text(
                            '请输入您注册时所填的E-mail',
                            style: theme.textStyles.secondary.copyWith(fontSize: 12),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                
                // 密码
                Row(
                  children: [
                    SizedBox(
                      width: 80,
                      child: Text('密码：', style: theme.textStyles.body, textAlign: TextAlign.right),
                    ),
                    const SizedBox(width: 8),
                    Expanded(
                      child: HInput(
                        hintText: '密码',
                        obscureText: true,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                
                // 登录按钮
                Row(
                  children: [
                    const SizedBox(width: 88),
                    MyButton(
                      text: '登 录',
                      type: MyButtonType.defaultType,
                      outline: true,
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建内联表单
  Widget _buildInlineForm(HTheme theme) {
    return Card(
      elevation: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题栏
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: theme.colors.divider,
                  width: 1,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('内联表单', style: theme.textStyles.h4),
                Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.arrow_drop_up, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                    const SizedBox(width: 8),
                    PopupMenuButton(
                      icon: const Icon(Icons.settings, size: 16),
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                      itemBuilder: (context) => [
                        const PopupMenuItem(
                          value: 1,
                          child: Text('选项1'),
                        ),
                        const PopupMenuItem(
                          value: 2,
                          child: Text('选项2'),
                        ),
                      ],
                    ),
                    const SizedBox(width: 8),
                    IconButton(
                      icon: const Icon(Icons.close, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                  ],
                ),
              ],
            ),
          ),
          
          // 内容区域
          Padding(
            padding: const EdgeInsets.all(20),
            child: Row(
              children: [
                SizedBox(
                  width: 200,
                  child: HInput(
                    hintText: '请输入用户名',
                  ),
                ),
                const SizedBox(width: 16),
                SizedBox(
                  width: 200,
                  child: HInput(
                    hintText: '请输入密码',
                    obscureText: true,
                  ),
                ),
                const SizedBox(width: 16),
                Row(
                  children: [
                    SizedBox(
                      width: 20,
                      height: 20,
                      child: Checkbox(
                        value: _inlineRememberMe,
                        onChanged: (value) {
                          setState(() {
                            _inlineRememberMe = value ?? false;
                          });
                        },
                      ),
                    ),
                    const SizedBox(width: 4),
                    Text('自动登录', style: theme.textStyles.body),
                  ],
                ),
                const SizedBox(width: 16),
                MyButton(
                  text: '登录',
                  type: MyButtonType.defaultType,
                  outline: true,
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建弹出表单
  Widget _buildPopupForm(HTheme theme) {
    return Card(
      elevation: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题栏
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: theme.colors.divider,
                  width: 1,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                RichText(
                  text: TextSpan(
                    text: '弹出表单 ',
                    style: theme.textStyles.h4,
                    children: [
                      TextSpan(
                        text: '弹出框登录示例',
                        style: theme.textStyles.secondary.copyWith(
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.arrow_drop_up, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                    const SizedBox(width: 8),
                    PopupMenuButton(
                      icon: const Icon(Icons.settings, size: 16),
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                      itemBuilder: (context) => [
                        const PopupMenuItem(
                          value: 1,
                          child: Text('选项1'),
                        ),
                        const PopupMenuItem(
                          value: 2,
                          child: Text('选项2'),
                        ),
                      ],
                    ),
                    const SizedBox(width: 8),
                    IconButton(
                      icon: const Icon(Icons.close, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                  ],
                ),
              ],
            ),
          ),
          
          // 内容区域
          Container(
            padding: const EdgeInsets.all(20),
            alignment: Alignment.center,
            child: MyButton(
              text: '打开登录窗口',
              type: MyButtonType.primary,
              onPressed: () {
                _showLoginDialog(context, theme);
              },
            ),
          ),
        ],
      ),
    );
  }
  
  /// 显示登录对话框
  void _showLoginDialog(BuildContext context, HTheme theme) {
    showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          child: Container(
            width: 500,
            padding: const EdgeInsets.all(20),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 左侧登录表单
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('登录', style: theme.textStyles.h3),
                          const SizedBox(height: 8),
                          Text('欢迎登录本站(⊙o⊙)', style: theme.textStyles.body),
                          const SizedBox(height: 16),
                          
                          // 用户名输入框
                          HInput(
                            labelText: '用户名：',
                            hintText: '请输入用户名',
                          ),
                          const SizedBox(height: 16),
                          
                          // 密码输入框
                          HInput(
                            labelText: '密码：',
                            hintText: '请输入密码',
                            obscureText: true,
                          ),
                          const SizedBox(height: 16),
                          
                          // 登录按钮和记住我
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  SizedBox(
                                    width: 20,
                                    height: 20,
                                    child: Checkbox(
                                      value: _rememberMe,
                                      onChanged: (value) {
                                        setState(() {
                                          _rememberMe = value ?? false;
                                        });
                                      },
                                    ),
                                  ),
                                  const SizedBox(width: 4),
                                  Text('自动登录', style: theme.textStyles.body),
                                ],
                              ),
                              MyButton(
                                text: '登录',
                                type: MyButtonType.primary,
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    
                    // 右侧注册提示
                    Container(
                      width: 1,
                      height: 200,
                      color: theme.colors.divider,
                      margin: const EdgeInsets.symmetric(horizontal: 20),
                    ),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          const SizedBox(height: 20),
                          Text('还不是会员？', style: theme.textStyles.h4),
                          const SizedBox(height: 8),
                          Text('您可以注册一个账户', style: theme.textStyles.body),
                          const SizedBox(height: 20),
                          Icon(
                            Icons.login,
                            size: 60,
                            color: theme.colors.primary.withOpacity(0.5),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    );
  }
  
  /// 构建所有表单元素
  Widget _buildAllFormElements(HTheme theme) {
    return Card(
      elevation: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题栏
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: theme.colors.divider,
                  width: 1,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                RichText(
                  text: TextSpan(
                    text: '所有表单元素 ',
                    style: theme.textStyles.h4,
                    children: [
                      TextSpan(
                        text: '包括自定义样式的复选和单选按钮',
                        style: theme.textStyles.secondary.copyWith(
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.arrow_drop_up, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                    const SizedBox(width: 8),
                    PopupMenuButton(
                      icon: const Icon(Icons.settings, size: 16),
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                      itemBuilder: (context) => [
                        const PopupMenuItem(
                          value: 1,
                          child: Text('选项1'),
                        ),
                        const PopupMenuItem(
                          value: 2,
                          child: Text('选项2'),
                        ),
                      ],
                    ),
                    const SizedBox(width: 8),
                    IconButton(
                      icon: const Icon(Icons.close, size: 16),
                      onPressed: () {},
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(),
                    ),
                  ],
                ),
              ],
            ),
          ),
          
          // 内容区域
          Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 普通输入框
                _buildFormRow(
                  theme,
                  label: '普通',
                  child: HInput(),
                ),
                _buildDivider(),
                
                // 带说明信息的输入框
                _buildFormRow(
                  theme,
                  label: '带说明信息',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      HInput(),
                      const SizedBox(height: 4),
                      Text(
                        '帮助文本，可能会超过一行，以块级元素显示',
                        style: theme.textStyles.secondary.copyWith(fontSize: 12),
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 密码输入框
                _buildFormRow(
                  theme,
                  label: '密码',
                  child: HInput(
                    obscureText: true,
                  ),
                ),
                _buildDivider(),
                
                // 提示输入框
                _buildFormRow(
                  theme,
                  label: '提示',
                  child: HInput(
                    hintText: '提示信息',
                  ),
                ),
                _buildDivider(),
                
                // 禁用输入框
                _buildFormRow(
                  theme,
                  label: '禁用',
                  child: HInput(
                    hintText: '已被禁用',
                    enabled: false,
                  ),
                ),
                _buildDivider(),
                
                // 静态控制
                _buildFormRow(
                  theme,
                  label: '静态控制',
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    child: Text(
                      'i@zi-han.net',
                      style: theme.textStyles.body,
                    ),
                  ),
                ),
                _buildDivider(),
                
                // 复选框和单选框
                _buildFormRow(
                  theme,
                  label: RichText(
                    text: TextSpan(
                      text: '复选框&单选框\n',
                      style: theme.textStyles.body,
                      children: [
                        TextSpan(
                          text: '普通Bootstrap元素',
                          style: TextStyle(
                            fontSize: 12,
                            color: theme.colors.primary,
                          ),
                        ),
                      ],
                    ),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 复选框
                      Row(
                        children: [
                          SizedBox(
                            width: 24,
                            height: 24,
                            child: Checkbox(
                              value: _checkbox1,
                              onChanged: (value) {
                                setState(() {
                                  _checkbox1 = value ?? false;
                                });
                              },
                            ),
                          ),
                          const SizedBox(width: 8),
                          Text('选项1', style: theme.textStyles.body),
                        ],
                      ),
                      const SizedBox(height: 8),
                      
                      // 单选按钮1
                      Row(
                        children: [
                          SizedBox(
                            width: 24,
                            height: 24,
                            child: Radio<String>(
                              value: 'option1',
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value!;
                                });
                              },
                            ),
                          ),
                          const SizedBox(width: 8),
                          Text('选项1', style: theme.textStyles.body),
                        ],
                      ),
                      const SizedBox(height: 8),
                      
                      // 单选按钮2
                      Row(
                        children: [
                          SizedBox(
                            width: 24,
                            height: 24,
                            child: Radio<String>(
                              value: 'option2',
                              groupValue: _radioValue,
                              onChanged: (value) {
                                setState(() {
                                  _radioValue = value!;
                                });
                              },
                            ),
                          ),
                          const SizedBox(width: 8),
                          Text('选项2', style: theme.textStyles.body),
                        ],
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 内联复选框
                _buildFormRow(
                  theme,
                  label: '内联复选框',
                  child: Row(
                    children: [
                      Row(
                        children: [
                          SizedBox(
                            width: 24,
                            height: 24,
                            child: Checkbox(
                              value: _inlineCheckbox1,
                              onChanged: (value) {
                                setState(() {
                                  _inlineCheckbox1 = value ?? false;
                                });
                              },
                            ),
                          ),
                          const SizedBox(width: 4),
                          Text('a', style: theme.textStyles.body),
                        ],
                      ),
                      const SizedBox(width: 16),
                      Row(
                        children: [
                          SizedBox(
                            width: 24,
                            height: 24,
                            child: Checkbox(
                              value: _inlineCheckbox2,
                              onChanged: (value) {
                                setState(() {
                                  _inlineCheckbox2 = value ?? false;
                                });
                              },
                            ),
                          ),
                          const SizedBox(width: 4),
                          Text('b', style: theme.textStyles.body),
                        ],
                      ),
                      const SizedBox(width: 16),
                      Row(
                        children: [
                          SizedBox(
                            width: 24,
                            height: 24,
                            child: Checkbox(
                              value: _inlineCheckbox3,
                              onChanged: (value) {
                                setState(() {
                                  _inlineCheckbox3 = value ?? false;
                                });
                              },
                            ),
                          ),
                          const SizedBox(width: 4),
                          Text('c', style: theme.textStyles.body),
                        ],
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 自定义样式的复选框和单选框
                _buildFormRow(
                  theme,
                  label: RichText(
                    text: TextSpan(
                      text: '复选框&单选框\n',
                      style: theme.textStyles.body,
                      children: [
                        TextSpan(
                          text: '自定义样式',
                          style: TextStyle(
                            fontSize: 12,
                            color: theme.colors.primary,
                          ),
                        ),
                      ],
                    ),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 自定义复选框1
                      _buildCustomCheckbox(
                        theme,
                        label: '选项1',
                        value: _customCheckbox1,
                        onChanged: (value) {
                          setState(() {
                            _customCheckbox1 = value ?? false;
                          });
                        },
                      ),
                      const SizedBox(height: 8),
                      
                      // 自定义复选框2（选中）
                      _buildCustomCheckbox(
                        theme,
                        label: '选项2（选中）',
                        value: _customCheckbox2,
                        onChanged: (value) {
                          setState(() {
                            _customCheckbox2 = value ?? false;
                          });
                        },
                      ),
                      const SizedBox(height: 8),
                      
                      // 自定义复选框3（选中并禁用）
                      _buildCustomCheckbox(
                        theme,
                        label: '选项3（选中并禁用）',
                        value: _customCheckbox3,
                        onChanged: null,
                      ),
                      const SizedBox(height: 8),
                      
                      // 自定义复选框4（禁用）
                      _buildCustomCheckbox(
                        theme,
                        label: '选项4（禁用）',
                        value: _customCheckbox4,
                        onChanged: null,
                      ),
                      const SizedBox(height: 16),
                      
                      // 自定义单选按钮1
                      _buildCustomRadio(
                        theme,
                        label: '选项1',
                        value: 'option1',
                        groupValue: _customRadioValue,
                        onChanged: (value) {
                          setState(() {
                            _customRadioValue = value!;
                          });
                        },
                      ),
                      const SizedBox(height: 8),
                      
                      // 自定义单选按钮2（选中）
                      _buildCustomRadio(
                        theme,
                        label: '选项2（选中）',
                        value: 'option2',
                        groupValue: _customRadioValue,
                        onChanged: (value) {
                          setState(() {
                            _customRadioValue = value!;
                          });
                        },
                      ),
                      const SizedBox(height: 8),
                      
                      // 自定义单选按钮3（选中并禁用）
                      _buildCustomRadio(
                        theme,
                        label: '选项3（选中并禁用）',
                        value: 'option3',
                        groupValue: 'option3',
                        onChanged: null,
                      ),
                      const SizedBox(height: 8),
                      
                      // 自定义单选按钮4（禁用）
                      _buildCustomRadio(
                        theme,
                        label: '选项4（禁用）',
                        value: 'option4',
                        groupValue: _customRadioValue,
                        onChanged: null,
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 内联自定义复选框
                _buildFormRow(
                  theme,
                  label: '内联复选框',
                  child: Row(
                    children: [
                      _buildCustomCheckbox(
                        theme,
                        label: 'a',
                        value: _customInlineCheckbox1,
                        onChanged: (value) {
                          setState(() {
                            _customInlineCheckbox1 = value ?? false;
                          });
                        },
                        isInline: true,
                      ),
                      const SizedBox(width: 16),
                      _buildCustomCheckbox(
                        theme,
                        label: 'b',
                        value: _customInlineCheckbox2,
                        onChanged: (value) {
                          setState(() {
                            _customInlineCheckbox2 = value ?? false;
                          });
                        },
                        isInline: true,
                      ),
                      const SizedBox(width: 16),
                      _buildCustomCheckbox(
                        theme,
                        label: 'c',
                        value: _customInlineCheckbox3,
                        onChanged: (value) {
                          setState(() {
                            _customInlineCheckbox3 = value ?? false;
                          });
                        },
                        isInline: true,
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 下拉选择框
                _buildFormRow(
                  theme,
                  label: 'Select',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 单选下拉框
                      Container(
                        decoration: BoxDecoration(
                          border: Border.all(color: theme.colors.divider),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        padding: const EdgeInsets.symmetric(horizontal: 12),
                        child: DropdownButtonHideUnderline(
                          child: DropdownButton<String>(
                            value: _selectedOption,
                            isExpanded: true,
                            items: _options.map((String option) {
                              return DropdownMenuItem<String>(
                                value: option,
                                child: Text(option),
                              );
                            }).toList(),
                            onChanged: (String? newValue) {
                              setState(() {
                                _selectedOption = newValue!;
                              });
                            },
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),
                      
                      // 多选下拉框
                      Container(
                        width: 200,
                        height: 120,
                        decoration: BoxDecoration(
                          border: Border.all(color: theme.colors.divider),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: ListView(
                          children: _options.map((String option) {
                            return CheckboxListTile(
                              title: Text(option),
                              value: _multiOptions.contains(option),
                              onChanged: (bool? value) {
                                setState(() {
                                  if (value == true) {
                                    _multiOptions.add(option);
                                  } else {
                                    _multiOptions.remove(option);
                                  }
                                });
                              },
                              dense: true,
                              controlAffinity: ListTileControlAffinity.leading,
                            );
                          }).toList(),
                        ),
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 验证通过
                _buildFormRow(
                  theme,
                  label: '验证通过',
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: theme.colors.success),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: HInput(),
                  ),
                ),
                _buildDivider(),
                
                // 未填写
                _buildFormRow(
                  theme,
                  label: '未填写',
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: theme.colors.warning),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: HInput(),
                  ),
                ),
                _buildDivider(),
                
                // 验证未通过
                _buildFormRow(
                  theme,
                  label: '验证未通过',
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: theme.colors.danger),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: HInput(),
                  ),
                ),
                _buildDivider(),
                
                // 自定义尺寸
                _buildFormRow(
                  theme,
                  label: '自定义尺寸',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      HInput(
                        hintText: '.input-lg',
                        size: HInputSize.large,
                      ),
                      const SizedBox(height: 16),
                      HInput(
                        hintText: 'Default input',
                        size: HInputSize.normal,
                      ),
                      const SizedBox(height: 16),
                      HInput(
                        hintText: '.input-sm',
                        size: HInputSize.small,
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 列尺寸
                _buildFormRow(
                  theme,
                  label: '列尺寸',
                  child: Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: HInput(
                          hintText: '.col-md-2',
                        ),
                      ),
                      const SizedBox(width: 16),
                      Expanded(
                        flex: 3,
                        child: HInput(
                          hintText: '.col-md-3',
                        ),
                      ),
                      const SizedBox(width: 16),
                      Expanded(
                        flex: 4,
                        child: HInput(
                          hintText: '.col-md-4',
                        ),
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 文本框组
                _buildFormRow(
                  theme,
                  label: '文本框组',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 前缀文本
                      Row(
                        children: [
                          Container(
                            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                            decoration: BoxDecoration(
                              color: theme.colors.background,
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(4),
                                bottomLeft: Radius.circular(4),
                              ),
                            ),
                            child: const Text('@'),
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(4),
                                  bottomRight: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                hintText: '用户名',
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      
                      // 后缀文本
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(4),
                                  bottomLeft: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                            decoration: BoxDecoration(
                              color: theme.colors.background,
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(4),
                                bottomRight: Radius.circular(4),
                              ),
                            ),
                            child: const Text('.00'),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      
                      // 前后缀文本
                      Row(
                        children: [
                          Container(
                            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                            decoration: BoxDecoration(
                              color: theme.colors.background,
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(4),
                                bottomLeft: Radius.circular(4),
                              ),
                            ),
                            child: const Text('¥'),
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border(
                                  top: BorderSide(color: theme.colors.divider),
                                  bottom: BorderSide(color: theme.colors.divider),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                            decoration: BoxDecoration(
                              color: theme.colors.background,
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(4),
                                bottomRight: Radius.circular(4),
                              ),
                            ),
                            child: const Text('.00'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 按钮插件
                _buildFormRow(
                  theme,
                  label: '按钮插件',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 前置按钮
                      Row(
                        children: [
                          MyButton(
                            text: '搜',
                            type: MyButtonType.primary,
                            onPressed: () {},
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(4),
                                  bottomRight: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      
                      // 后置按钮
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(4),
                                  bottomLeft: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                          MyButton(
                            text: '搜索',
                            type: MyButtonType.primary,
                            onPressed: () {},
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 带下拉框
                _buildFormRow(
                  theme,
                  label: '带下拉框',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 前置下拉
                      Row(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(4),
                                bottomLeft: Radius.circular(4),
                              ),
                            ),
                            child: PopupMenuButton<String>(
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 12,
                                  vertical: 8,
                                ),
                                child: Row(
                                  children: [
                                    Text('操作', style: TextStyle(color: theme.colors.text)),
                                    const SizedBox(width: 4),
                                    Icon(Icons.arrow_drop_down, color: theme.colors.text, size: 16),
                                  ],
                                ),
                              ),
                              itemBuilder: (context) => [
                                const PopupMenuItem(
                                  value: '选项1',
                                  child: Text('选项1'),
                                ),
                                const PopupMenuItem(
                                  value: '选项2',
                                  child: Text('选项2'),
                                ),
                                const PopupMenuItem(
                                  value: '选项3',
                                  child: Text('选项3'),
                                ),
                                const PopupMenuItem(
                                  value: '',
                                  enabled: false,
                                  height: 1,
                                  child: Divider(),
                                ),
                                const PopupMenuItem(
                                  value: '选项4',
                                  child: Text('选项4'),
                                ),
                              ],
                              onSelected: (value) {},
                            ),
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(4),
                                  bottomRight: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      
                      // 后置下拉
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(4),
                                  bottomLeft: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(4),
                                bottomRight: Radius.circular(4),
                              ),
                            ),
                            child: PopupMenuButton<String>(
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 12,
                                  vertical: 8,
                                ),
                                child: Row(
                                  children: [
                                    Text('操作', style: TextStyle(color: theme.colors.text)),
                                    const SizedBox(width: 4),
                                    Icon(Icons.arrow_drop_down, color: theme.colors.text, size: 16),
                                  ],
                                ),
                              ),
                              itemBuilder: (context) => [
                                const PopupMenuItem(
                                  value: '选项1',
                                  child: Text('选项1'),
                                ),
                                const PopupMenuItem(
                                  value: '选项2',
                                  child: Text('选项2'),
                                ),
                                const PopupMenuItem(
                                  value: '选项3',
                                  child: Text('选项3'),
                                ),
                                const PopupMenuItem(
                                  value: '',
                                  enabled: false,
                                  height: 1,
                                  child: Divider(),
                                ),
                                const PopupMenuItem(
                                  value: '选项4',
                                  child: Text('选项4'),
                                ),
                              ],
                              onSelected: (value) {},
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 分段
                _buildFormRow(
                  theme,
                  label: '分段',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 前置分段
                      Row(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(4),
                                bottomLeft: Radius.circular(4),
                              ),
                            ),
                            child: Row(
                              children: [
                                // 操作按钮
                                InkWell(
                                  onTap: () {},
                                  child: Container(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 12,
                                      vertical: 8,
                                    ),
                                    decoration: BoxDecoration(
                                      border: Border(
                                        right: BorderSide(
                                          color: theme.colors.divider,
                                          width: 1,
                                        ),
                                      ),
                                    ),
                                    child: Text('操作', style: TextStyle(color: theme.colors.text)),
                                  ),
                                ),
                                // 下拉箭头
                                PopupMenuButton<String>(
                                  child: Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8,
                                      vertical: 8,
                                    ),
                                    child: Icon(Icons.arrow_drop_down, color: theme.colors.text, size: 16),
                                  ),
                                  itemBuilder: (context) => [
                                    const PopupMenuItem(
                                      value: '选项1',
                                      child: Text('选项1'),
                                    ),
                                    const PopupMenuItem(
                                      value: '选项2',
                                      child: Text('选项2'),
                                    ),
                                    const PopupMenuItem(
                                      value: '选项3',
                                      child: Text('选项3'),
                                    ),
                                    const PopupMenuItem(
                                      value: '',
                                      enabled: false,
                                      height: 1,
                                      child: Divider(),
                                    ),
                                    const PopupMenuItem(
                                      value: '选项4',
                                      child: Text('选项4'),
                                    ),
                                  ],
                                  onSelected: (value) {},
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(4),
                                  bottomRight: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      
                      // 后置分段
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(color: theme.colors.divider),
                                borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(4),
                                  bottomLeft: Radius.circular(4),
                                ),
                              ),
                              child: HInput(
                                borderType: HInputBorderType.none,
                              ),
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              border: Border.all(color: theme.colors.divider),
                              borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(4),
                                bottomRight: Radius.circular(4),
                              ),
                            ),
                            child: Row(
                              children: [
                                // 操作按钮
                                InkWell(
                                  onTap: () {},
                                  child: Container(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 12,
                                      vertical: 8,
                                    ),
                                    decoration: BoxDecoration(
                                      border: Border(
                                        right: BorderSide(
                                          color: theme.colors.divider,
                                          width: 1,
                                        ),
                                      ),
                                    ),
                                    child: Text('操作', style: TextStyle(color: theme.colors.text)),
                                  ),
                                ),
                                // 下拉箭头
                                PopupMenuButton<String>(
                                  child: Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8,
                                      vertical: 8,
                                    ),
                                    child: Icon(Icons.arrow_drop_down, color: theme.colors.text, size: 16),
                                  ),
                                  itemBuilder: (context) => [
                                    const PopupMenuItem(
                                      value: '',
                                      child: Text('分段'),
                                    ),
                                  ],
                                  onSelected: (value) {},
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                _buildDivider(),
                
                // 按钮
                Row(
                  children: [
                    const SizedBox(width: 160),
                    MyButton(
                      text: '保存内容',
                      type: MyButtonType.primary,
                      onPressed: () {},
                    ),
                    const SizedBox(width: 16),
                    MyButton(
                      text: '取消',
                      type: MyButtonType.defaultType,
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建表单行
  Widget _buildFormRow(
    HTheme theme, {
    required Widget child,
    dynamic label,
  }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: 160,
          child: Padding(
            padding: const EdgeInsets.only(top: 8),
            child: label is String
                ? Text(
                    label,
                    style: theme.textStyles.body,
                    textAlign: TextAlign.right,
                  )
                : label,
          ),
        ),
        const SizedBox(width: 16),
        Expanded(child: child),
      ],
    );
  }
  
  /// 构建分隔线
  Widget _buildDivider() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16),
      child: Container(
        height: 1,
        color: const Color(0xFFEEEEEE),
      ),
    );
  }
  
  /// 构建自定义复选框
  Widget _buildCustomCheckbox(
    HTheme theme, {
    required String label,
    required bool value,
    required ValueChanged<bool?>? onChanged,
    bool isInline = false,
  }) {
    final bool isDisabled = onChanged == null;
    
    return InkWell(
      onTap: isDisabled ? null : () => onChanged?.call(!value),
      child: Row(
        mainAxisSize: isInline ? MainAxisSize.min : MainAxisSize.max,
        children: [
          Container(
            width: 18,
            height: 18,
            decoration: BoxDecoration(
              border: Border.all(
                color: isDisabled
                    ? theme.colors.disabledBackground
                    : theme.colors.primary,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(3),
              color: value
                  ? (isDisabled
                      ? theme.colors.disabledBackground
                      : theme.colors.primary)
                  : Colors.white,
            ),
            child: value
                ? const Icon(
                    Icons.check,
                    size: 14,
                    color: Colors.white,
                  )
                : null,
          ),
          const SizedBox(width: 8),
          Text(
            label,
            style: TextStyle(
              color: isDisabled ? theme.colors.textDisabled : theme.colors.text,
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建自定义单选按钮
  Widget _buildCustomRadio(
    HTheme theme, {
    required String label,
    required String value,
    required String groupValue,
    required ValueChanged<String?>? onChanged,
  }) {
    final bool isSelected = value == groupValue;
    final bool isDisabled = onChanged == null;
    
    return InkWell(
      onTap: isDisabled ? null : () => onChanged?.call(value),
      child: Row(
        children: [
          Container(
            width: 18,
            height: 18,
            decoration: BoxDecoration(
              border: Border.all(
                color: isDisabled
                    ? theme.colors.disabledBackground
                    : theme.colors.primary,
                width: 1,
              ),
              shape: BoxShape.circle,
              color: Colors.white,
            ),
            child: isSelected
                ? Center(
                    child: Container(
                      width: 10,
                      height: 10,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: isDisabled
                            ? theme.colors.disabledBackground
                            : theme.colors.primary,
                      ),
                    ),
                  )
                : null,
          ),
          const SizedBox(width: 8),
          Text(
            label,
            style: TextStyle(
              color: isDisabled ? theme.colors.textDisabled : theme.colors.text,
            ),
          ),
        ],
      ),
    );
  }
} 